<template>
  <div class="attendances-container">
    <div class="app-container">
      <!-- 卡片视图组件 -->
      <el-card class="tree-card">
        <tree-tools
          :node-data="companyInfo"
          :is-root="false"
          style="border-bottom: 1px solid #ccc"
          @addDepts="showDialog"
        />
        <!-- el-row和el-col栅格系统 -->
        <!-- <el-row
          type="flex"
          justify="space-between"
          style="border-bottom:1px solid #ccc "
        >
          <el-col :span="20">传智教育</el-col>
          <el-col :span="4">
            <el-row>
              <el-col :span="12">负责人</el-col>
              <el-col :span="12">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    菜单
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>添加子部门</el-dropdown-item>
                    <el-dropdown-item>查看部门</el-dropdown-item>
                    <el-dropdown-item>删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </el-col>
        </el-row> -->

        <!--
          :data 指定树形控件的数据源
           props树形控件关联的数据 默认 label 展示给用户看的  children 是进行父子节点依赖关系的属性
           如果数据源 展示的节点不是name 父子依赖关系不是children 可以配置props属性 设置label和children对应的节点
           default-expand-all 默认展开所有节点
         -->
        <el-tree :data="depts" :props="defaultProps" default-expand-all>
          <template #default="{data}">
            <!-- {{ data.name }} data 就是当前行节点数据 是一个对象-->
            <tree-tools
              :node-data="data"
              @reload="getDepts"
              @editDepts="editDepts"
              @addDepts="showDialog"
            ></tree-tools>
          </template>
        </el-tree>
        <!-- 新增部门的对话框  -->
        <add-depts
          ref="addDeptsRef"
          :dialog-visible.sync="dialogVisible"
          :node-data="nodeData"
          :depts-list="deptsList"
          @reload="getDepts"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import AddDepts from './components/add-depts.vue'
import { reqGetDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
export default {
  name: 'Departments',
  components: { TreeTools, AddDepts },
  data() {
    return {
      depts: [], // 公司的部门列表
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      companyInfo: { name: '传智教育', manager: '负责人' }, // 头部tree-tools的传递给子组件的对象
      dialogVisible: false, // 控制新增部门对话框
      nodeData: {},
      deptsList: [] // 部门列表的原始数据
    }
  },
  created() {
    this.getDepts()
  },
  methods: {
    // 获取公司部门列表的方法
    async getDepts() {
      const {
        data: { depts }
      } = await reqGetDepartments()
      console.log('111', depts)
      this.depts = tranListToTreeData(depts, '')
      // console.log(this.depts)
      // 做部门编码重复校验工作 存储一下源数据
      this.deptsList = depts
    },
    // 点击新增子部门展示对话框并介绍点击部门的信息
    showDialog(nodeData) {
      this.$refs.addDeptsRef.title = '新增部门'
      // 展示对话框
      this.dialogVisible = true
      // 将点击的部门信息存储 并传递给addDepts子组件
      this.nodeData = nodeData
      // 如果添加的是一级部门,保证新增的一级部门有pid
      this.companyInfo.id = ''
      // 新增一个children节点 为了校验部门名称
      this.companyInfo.children = []
    },
    editDepts(nodeData) {
      this.$refs.addDeptsRef.title = '编辑部门'
      // 展示对话框
      this.dialogVisible = true
      // 将点击的部门信息存储 并传递给editDepts子组件
      this.nodeData = nodeData
      this.$refs.addDeptsRef.EditshowDialog(nodeData)
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 20px 20px;
  font-size: 14px;
}
// 直接覆盖树形样式即可
::v-deep .el-tree {
  // 小三角的样式, 去掉默认的小三角的旋转效果
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  // 有子节点 且未展开 +
  .el-icon-caret-right:before {
    background: url('~@/assets/common/add.png') no-repeat 0 0;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
  // 有子节点 且已展开 -
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url('~@/assets/common/sub.png') no-repeat 0 0;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
  // 没有子节点
  .el-tree-node__expand-icon.is-leaf::before {
    background: url('~@/assets/common/man.png') no-repeat 0 0;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
}
</style>
